// @flow
import React from 'react';
import {Layout, Menu} from 'antd';
import '@ant-design/v5-patch-for-react-19';
import {DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined} from '@ant-design/icons';
import {useRouter} from 'next/navigation';

const {Sider} = Layout;

interface MyMenuProps {
    collapsed: boolean; // 菜单是否折叠的状态
}

const menuData = [
    {
        label: '仪表面板',
        key: '/content/home',
        icon: <PieChartOutlined/>,
        path: '/dashboard', // 新增路径
    },
    {
        label: 'Option 2',
        key: '2',
        icon: <DesktopOutlined/>,
        path: '/option2',
    },
    {
        label: 'User',
        key: 'sub1',
        icon: <UserOutlined/>,
        path: '/user',
        children: [
            {label: 'Tom', key: '3', path: '/user/tom'},
            {label: 'Bill', key: '4', path: '/user/bill'},
            {label: 'Alex', key: '5', path: '/user/alex'},
        ],
    },
    {
        label: 'Team',
        key: 'sub2',
        icon: <TeamOutlined/>,
        path: '/team',
        children: [
            {label: 'Team 1', key: '6', path: '/team/team1'},
            {label: 'Team 2', key: '8', path: '/team/team2'},
        ],
    },
    {
        label: 'Files',
        key: '9',
        icon: <FileOutlined/>,
        path: '/files',
    },

];
const MyMenu: React.FC<MyMenuProps> = (MyMenuProps) => {

    const {collapsed} = MyMenuProps
    const router = useRouter();

    function getItemFromJSON(item: {
        label: string;
        key: string;
        icon?: React.ReactNode;
        children?: Array<any>;
        title?: string
    }) {
        const {label, key, icon, children, title} = item;
        return {
            key: key,
            icon,
            children: children ? children.map(child => getItemFromJSON(child)) : undefined,
            label,
            title
        };
    }

    // 动态生成 items
    const items = menuData.map(item => getItemFromJSON(item));


    function onclick(event) {
        router.push(event.key);
    }

    const onchange = () => {
        console.log('onchange');
    }

    return (
        <>
            <Sider trigger={null}
                   collapsible collapsed={collapsed}>

                <div className="demo-logo-vertical">
                    <button> 立即购买</button>
                </div>
                <Menu
                    mode="inline"
                    theme="light"
                    defaultSelectedKeys={['1']}
                    items={items}
                    onClick={onclick}
                    onChange={onchange}
                />
            </Sider>
        </>
    );
};

export default MyMenu;